<template>
  <div
      class="app-small-card cursor-pointer inline-block text-center"
      :style="style"
      @contextmenu.stop
      v-ripple @click.stop="openLink(data, {module: 'wkb', page: 'main', element: 'app-icon', event: 'click'})"
  >
    <q-badge v-if="clickBadge && data.clickCount" color="grey" floating transparent>
      {{ data.clickCount }}
    </q-badge>
    <div class="q-focus-helper"></div>
    <div class="app-small-card__icon">
      <q-avatar v-if="data.appData.icon" rounded
                class="vertical-top"
                style="border-radius: 4px;"
                :size="iconSize"
                :style="{background:data.appData.background}"
      >
        <img draggable="false" :src="data.appData.icon" alt="">
      </q-avatar>
      <q-avatar v-else rounded
                class="vertical-top"
                style="border-radius: 4px;"
                text-color="white"
                :size="iconSize"
                :color="['primary','secondary','amber','green','red'][data.appData.name[0].charCodeAt(0)%5]"
      >{{ data.appData.name[0] }}
      </q-avatar>
    </div>
    <div class="app-small-card__title ellipsis full-width">{{ data.appData.name }}
    </div>
    <q-popup-proxy v-model="showPopupMenu" context-menu>
      <q-list style="min-width: 100px">
        <q-item clickable v-close-popup @click.stop="editApp" v-if="showEdit">
          <q-item-section>编辑应用</q-item-section>
        </q-item>
        <q-separator/>
        <q-item clickable v-close-popup @click.stop="removeApp">
          <q-item-section>删除应用</q-item-section>
        </q-item>
        <q-separator/>
        <q-item clickable v-close-popup @click.stop="moveOut" v-if="showMoveOut">
          <q-item-section>移出分组</q-item-section>
        </q-item>
      </q-list>
    </q-popup-proxy>
  </div>
</template>

<script>

import AppActivityMixin from '../../../mixins/app-activity'
import AppCardBase from '../../../mixins/app-card-base'
import { getSizeMixin } from '../../../mixins/size'

export default {
  name: 'AppSmallCard',
  props: {
    size: {
      type: String,
      default: 'md'
    },
    clickBadge: Boolean
  },
  mixins: [
    AppCardBase,
    AppActivityMixin,
    // style="width: 128px;height: 124px"
    getSizeMixin({
      xs: 64,
      sm: 80,
      md: 96
    })
  ],
  computed: {
    style () {
      if (this.sizeStyle) {
        return this.sizeStyle
      }
      return {}
    },
    iconSize () {
      return '1em'
    }
  },
  mounted () {
    // ...
  }
}
</script>

<style lang="scss">

.app-small-card {
  transition: all .3s;
  position: relative;
  width: 1.2em;
  height: calc(1em + 1em / 2.5);
  padding: calc(1em / 10);

  &__icon {
    width: 100%;
    height: 1em;
    line-height: 1em
  }

  &__title {
    font-size: 0.15em;
    line-height: 2;
    display: block;
    width: 100%;
    text-align: center;
  }

  &:hover {
    .q-focus-helper {
      background-color: currentcolor;
      opacity: 0.15;
    }
  }

}

</style>
